//main.js 是我们js文件的入口文件


//1.导入JQuery 
//import *** from *** 是ES6中导入模块的方式
//由于ES6的代码，太高级了，浏览器解析不了，所以，这一行执行会报错
import $ from 'jquery'
//const $ = require('jquery')


//使用 import语法，导入css样式表
import './css/index.css'
import './css/index.less'
import './css/index.scss'
//注意：webpack，默认只能打包处理JS类型的文件，无法处理 其他的非JS类型的文件；
//如果要处理 非JS类型的文件，我们需要手动安装一下 合适第三方 loader 加载器；
//1.如果想要打包处理 css文件，需要安装cnpm i  style-loader css-loader -D
//2.打开webpack.config.js这个配置文件，在里面，新增一个配置节点，叫做module，他是一个对象；
//在这个module对对象上，有一个rules属性是个数组；这个数组中，存放了所有第三方文件的匹配和处理规则



//注意：webpack处理第三方文件类型的过程：
//1.发现这个 要处理的文件不是JS文件，然后就去 配置文件中，查找有没有对应的第三方loader规则
//2.如果能找到对应的规则，就会调用对应的loader处理这种文件类型
//3.在调用loader的时候，是从后万往前调用的
//4.当最后的一个loader调用完毕，会把 处理的结果，直接交给webpack 进行打包合并，最终输出到 bundle.js中去




$(function () {
    $('li:odd').css('backgroundColor', 'red')
    $('li:even').css('backgroundColor', function () {
        return '#' + 'D97643';
    })
})


//经过刚才的样式，webpack可以做什么事情？
//1.webpack能够处理JS文件的互相依赖关系
//2.webpack能过处理js的兼容问题，把 高级的，浏览器不识别的语法，转为 低级的浏览器能正常识别的语法
//3.刚才运行的命令格式： webpack 要打包的文件的路径 -o 打包好输出文件的路径 --mode development
